<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%	
	//获取项目名
	String path = request.getContextPath();
	//获取tomcat 协议+地址+端口号+ 获取项目名
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	//out.println(basePath);
%>
<!doctype html>
<html>
<head>
<title>ZZG-用户注册</title>

<link href="<%=basePath %>css/register.css" rel='stylesheet'
	type='text/css' media="all" />

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"
	content="Login And Registration Form Widget Responsive, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href='//fonts.googleapis.com/css?family=Poiret+One'
	rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Lobster' rel='stylesheet'
	type='text/css'>

<script src="<%=basePath %>jquery-3.5.1.js"></script>
<script
	src="<%=basePath %>bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body id="body">

	<div id="main-box">
		<div class="header2" id="reg-head">
			<h1>用户注册</h1>
		</div>
		<span>${msg }</span>
		<div class="content2" id="reg-frame">

			<form id="res" action="<%=basePath %>userServlet" method="post">

				<label class="fileContainer"><img src="" alt=""
					title="preview-img"><input type="file" /></label>

				<script>
                    var fileInput = document.querySelector('input[type=file]'),
                        previewImg = document.querySelector('img');
                    fileInput.addEventListener('change', function () {
                        var file = this.files[0];
                        var reader = new FileReader();
                        // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
                        reader.addEventListener("load", function () {
                            previewImg.src = reader.result;
                        }, false);
                        // 调用reader.readAsDataURL()方法，把图片转成base64
                        reader.readAsDataURL(file);
                    }, false);
                </script>
				<input type="hidden" name="mark" value="register"> <input
					id="userName" type="text" name="userName" value="用户名"
					onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = '用户名';}"> <input
					id="userPhoneNumber" type="text" name="userPhoneNumber"
					value="手机号码" onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = '手机号码';}"> <input
					id="psw1" type="text" name="psw1" value="密码"
					onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = '密码';}"> <input
					id="psw2" type="text" name="psw2" value="确认密码"
					onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = '确认密码';}"> <input
					id="btn" class="register" value="注册">
			</form>
		</div>
		<div class="footer">
			<p>Copyright © 2020 | Design by ZZG_干干
		</div>
	</div>

	<script type="text/javascript">
			$("#btn").click(function(){
				var userName = $("#userName").val();
				var userPhoneNumber = $("#userPhoneNumber").val();
				var psw1 = $("#psw1").val();
				var psw2 = $("#psw2").val();
				
				/* 用户名不能为空 */
				if(userName=="用户名"){
					document.getElementById("userName").value ="用户名不能为空";
					$("#userName").css("color","red");
					return;
				}
				
				/* 用户名应在2-20个字符之间 */
				var len = userName.length;
				if(len<2 || len>20){
					document.getElementById("userName").value ="用户名应在2-20个字之间";
					$("#userName").css("color","red");
					return;
				}
				
				/* 用户名不能重复 */
				$.getJSON("<%=basePath %>userServlet",
             			"mark=checkUserName&userName=" + userName,
             			function(mes){ //如果返回true,说明用户名可用，否则不可用
             				if(mes==false){
             					document.getElementById("userName").value ="用户名已存在!";
    							$("#userName").css("color","red");
    							return;	
             			}
             		}
             	);
				
				
				/* 手机号码不能为空 */
				if(userPhoneNumber=="手机号码"){
					document.getElementById("userPhoneNumber").value ="手机号码不能为空";
					$("#userPhoneNumber").css("color","red");
					return;
				}
				
				/* 正则表达式判断手机号码是否有误 */
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(userPhoneNumber))){ 
					document.getElementById("userPhoneNumber").value ="手机号码有误!";
					$("#userPhoneNumber").css("color","red");
					return;
			    } 
				
				/* 检查该号码是否已注册*/
				$.ajax({
					url:"<%=basePath %>userServlet",
					type:"get",
					data:"mark=checkPhoneNumber&userPhoneNumber="+userPhoneNumber,
					dataType:"json",
					success:function(mes){
						if(mes==false){
							document.getElementById("userPhoneNumber").value ="手机号码已被注册!";
							$("#userPhoneNumber").css("color","red");
							return;
						}
						
					}
				});
				
				/* 密码不能为空 */
				if(psw1=="密码"){
					document.getElementById("psw1").value ="密码不能为空";
					$("#psw1").css("color","red");
					return;
				}
				
				/* 密码应在6-15位之间 */
				var psw1Len = psw1.length;
				if(psw1Len<6 || psw1Len>15){
					document.getElementById("psw1").value ="密码应在6-15个位之间";
					$("#psw1").css("color","red");
					return;
				}
				
				/* 确认密码应等于密码 */
				if(psw2!=psw1){
					document.getElementById("psw2").value ="确认密码与密码不等";
					$("#psw2").css("color","red");
					return;
				}
				
				$("#res").submit();
				
				
			})

        </script>

</body>
</html>